<template>
	<view style="position: relative;">
		<MapContainer ref="refMap" @emitControl="emitControl"></MapContainer>
	</view>
</template>
<script>
	import {
		wgs84togcj02
	} from "@/utils/gps.js"
	import MapContainer from './components/mapContainer.vue'
	export default {
		components: {
			MapContainer
		},
		data() {
			return {
				show: false
			}
		},
		onShow() {
			setTimeout(() => {
				this.handleRemoveAll()

				this.deviceListFn()
			}, 300)
		},
		onLoad() {

		},
		methods: {
			// 设备地图
			deviceListFn(data) {
				uni.$u.http.get('/api/device/device/getYuliangzhanList').then(res => {
					if (res.code == 200) {
						console.log('res', res);
						let list = res.rows.map((i) => {
							return {
								lat: wgs84togcj02(i.mapLon, i.mapLat)[1],
								lng: wgs84togcj02(i.mapLon, i.mapLat)[0],
								id: i.nickName
							}
						})
						// this.handleMarker()
						this.handleCluster(list)
						console.log('list',list);
					}
				}).catch(err => {
					console.log('错误--', err);
				})
			},
			// 点聚合
			handleCluster(list) {
				// let list = new Array()
				// for (let i = 0; i < 50; i++) {
				// 	let latlng = {
				// 		lat: 38.034826 + i * 0.001,
				// 		lng: 114.459155 + i * 0.001,
				// 		id:i
				// 	}
				// 	list.push(latlng)
				// }
				// this.showToast('handleCluster')
				//回调函数只能传函数名称
				// 回调函数必须在组件的父页面实现
				this.$refs.refMap.handleMarkercluster(list, 'handleMarkerClick', {
					msg: '这是handleMarker传过来的参数。'
				})
			},
			emitControl(e) {
				console.log('aaa+++++aaa', e);
				this.show = true
			},
			showToast(text) {
				uni.showToast({
					icon: 'none',
					title: text
				})
			},
			// 标记
			handleMarker() {
				var latlng = {
					lat: 25.04564,
					lng: 102.74157
				}
				//回调函数只能传函数名称
				// 回调函数必须在组件的父页面实现
				this.$refs.refMap.handleMarker(latlng, 'handleMarkerClick', {
					msg: '这是handleMarker传过来的参数------。'
				})
				setTimeout(() => {
					// 当执行多个地图操作时必须延迟执行否则没反应
					this.$refs.refMap.handlePanTo(latlng)
				}, 100)
			},
			// 路线
			handlePolyline() {
				var latlngs = new Array()
				for (var i = 1; i < 20; i++) {
					var obj = {
						lat: 25.04564 + i * 0.005,
						lng: 102.74157 + i * 0.005
					}
					latlngs.push(obj)
				}
				this.$refs.refMap.handlePolyline(latlngs, 'handleMarkerClick', {
					msg: '这是handlePolyline传过来的参数。'
				})
				setTimeout(() => {
					// 当执行多个地图操作时必须延迟执行否则没反应
					this.$refs.refMap.handleFitBounds(latlngs)
				}, 100)
			},
			// 圆标记点
			handleCircle() {
				var latlng = {
					lat: 25.04564,
					lng: 102.76157
				}
				this.$refs.refMap.handleCircle(latlng, {
						popup: '<h4>我是圆形标记</h4>'
					},
					'handleMarkerClick', {
						msg: '这是handleCircle传过来的参数。'
					})
				setTimeout(() => {
					// 当执行多个地图操作时必须延迟执行否则没反应
					this.$refs.refMap.handlePanTo(latlng)
				}, 100)
				setTimeout(() => {
					// 当执行多个地图操作时必须延迟执行否则没反应
					this.$refs.refMap.handleSetZoom(18)
				}, 500)
			},
			handleGeoJson() {
				// 组件接口已经实现具体可参考组件
				//  this.$refs.refMap.handleGeoJson(geojson, options, callback, param)
				this.showToast('handleGeoJson')
			},
			// 清空
			handleRemoveAll() {
				this.$refs.refMap.handleRemoveAll()
			},
			handleMarkerClick(obj) {
				this.showToast(obj.msg)
			},
		}
	}
</script>

<style lang="scss">
	.flex {
		--n: 4;
		--w: 150upx;
		margin-top: 10px;
		display: flex;
		flex-wrap: wrap;

		.btn-item {
			font-size: 12px;
			background-color: #096;
			color: #FFF;
			width: 150upx;
			margin: 5px calc((100% - var(--n) * var(--w)) / var(--n)/2);
		}
	}


	.form-item {
		border: 1px solid #eee;
		padding: 5px;
	}

	.padding-xl {
		padding: 15px;
	}
</style>